<template>
    <div style="padding:10px">
        <div class="mail-info">
            <div class="title-info">
                <span class="mail-title">{{mailDetails.name}}</span>
            </div>
            <div style="margin-top:10px">
                <span class="mail-info-title">发件人：</span>
                <span class="send-name">{{mailDetails.sender}}</span>
            </div>
            <div style="margin-left:2px;margin-top:10px">
                <span class="mail-info-title">时&nbsp;&nbsp;&nbsp;间：</span>
                <span class="send-name">{{mailDetails.sentDate}}</span>
            </div>
        </div>
        <div class="mail-content" v-html="html"></div>
        <div class="mail_enclosure" v-if="mailDetails.mailContent.application && mailDetails.mailContent.application.length > 0">
          <div style="padding: 6px 10px 10px 8px;" class="txt_left">
            <i class="iconfont icon-fujian-copy mail_enclosure_header_icon"></i>
            <span class="mail_enclosure_header">附件</span>
          </div>
          <div class="mail_enclosure_content">
            <div class="mail_enclosure_content_item" v-for="(items,index) in mailDetails.mailContent.application">
              <img class="mail_enclosure_content_item_icon" :src="src">
              <div class="mail_enclosure_content_item_right">
                <span class="mail_enclosure_content_item_right_name">{{items.fileName}}</span>
                <a class="mail_enclosure_content_item_right_a" @click="enclosureClick(items)">下载</a>
              </div>
            </div>
          </div>
        </div>
    </div>
</template>
<script>
import { info } from "@/api/mail";
import utils from "@/utils/utils";
export default {
    data() {
        return {
            listQuery: {
                orders: "",
                projId: "",
            },
            mailDetails: { mailContent: { html: "" ,application:[]} },
            html:'',
            src:require("../../../img/140a48decfb0a656a23a22e2cbb6bee8.svg")
        };
    },
    created() {
        console.log(this.$route.query);
        this.listQuery = this.$route.query;
        this.loadFind();
    },
    methods: {
        loadFind() {
            var _this = this;
            info(_this.listQuery).then((res) => {
                console.log(res);
                if (res.data.length > 0) {
                    res.data.forEach((element) => {
                        element.sentDate = utils.dateFormat(element.sentDate);
                    });
                    _this.mailDetails = res.data[0];
                    if(!_this.mailDetails.mailContent.html && !_this.mailDetails.mailContent.html){
                      _this.html = _this.mailDetails.mailContent.alternative.html
                    }else{
                      _this.html = _this.mailDetails.mailContent.html
                    }
                    console.log(_this.mailDetails)
                }
            });
        },
        enclosureClick(item){
          window.open(item.fileUrl,'_blank')
        }
    },
};
</script>
<style scoped>
.tool-bar {
    margin-top: -20px;
    margin-left: -20px;
}

.mail-info {
    background: #eff5fb;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #aac1de;
    padding: 10px;
}

.mail-info div {
    font-size: 14px;
}

.mail-info .el-tag {
    margin-right: 6px;
}

.title-info {
}

.mail-title {
    color: #2131a1;
    font-size: 14px;
    vertical-align: -3px;
    font-weight: bold;
}

.detail-mark-star {
    font-size: 18px;
    vertical-align: -3px;
    color: #f08a5d;
    cursor: pointer;
}

.label-item {
    margin-left: 5px;
}

.info-tag {
    margin-left: inherit;
}

.target-board {
    display: inline-block;
}

.send-name,
.target-name {
    color: #1fab89;
    font-weight: 600;
    font-size: 12px;
}

.el-collapse-item__header {
    height: 30px;
    line-height: 30px;
    padding-left: 0;
    color: #20a0ff;
    font-size: 13px;
}

.el-collapse-item__content {
    padding: 2px;
}
.mail-info-title {
    color: #798699;
    font-size: 12px;
}
.mail_enclosure{
  background-color: #e0ecf9;
  margin-top: 10px;
}
.txt_left{
  text-align: left;
}
.mail_enclosure_header{
  color: #000000;
  font-size: 14px;
  font-weight: bold;
}
.mail_enclosure_header_icon{
  color: #000000;
  font-size: 14px;
  font-weight: bold;
}
.mail-content{
  padding: 10px;
}
.mail_enclosure_content{
  padding: 0 8px 6px 12px;
  background: #fff;
}

.mail_enclosure_content_item{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 10px;
}
.mail_enclosure_content_item_icon{
  width: 40px;
  height: 40px;
}
.mail_enclosure_content_item_right{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mail_enclosure_content_item_right_name{
  color: #000000;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 5px;
}

.mail_enclosure_content_item_right_a{
  font-size: 12px;
  color:#1e5494
}
</style>